<script>
import http from "@/api/http";

export default {
  name: "HeadPage",
  data(){
    return{
      userName:'',
    }
  },
  methods:{
    logout(){
      http.put(`/user/logout`)
          .then(res => {
            localStorage.removeItem("token");
            this.$router.push({ path: '/' });
            this.$message.success("您已成功退出！");
          })
          .catch(error => {
            console.error('退出失败');
            this.$message.error("退出失败");
          });
    },
    getName(){
      http.get('/api/userinfo')
          .then(res=>{
            this.userName=res.userName;
            console.log(res.userName);
          })
          .catch(error=>{
            console.error('获取用户名失败');
            this.$message.error("获取用户名失败");
          })
    }
  },
  created() {
    this.getName();
  }
}
</script>

<template>
  <div>
  <div class="head-one">
    <div class="title">
      <img src="../assets/logo2.png">
      <span class="titleText">项目管理系统</span>
    </div>
    <div>
    <router-link tag="button" class="select" to="/no">工作台需求</router-link>
    <router-link tag="button" class="select" to="/ManagerHead">项目</router-link>
    <router-link tag="button" class="select" to="/no">合同</router-link>
    <router-link tag="button" class="select" to="/no">需求</router-link>
  </div>
    <div>
      <el-popover
          placement="bottom"
          v-model="visible">
        <div style="text-align: center; margin: 0">
          <el-button type="primary" size="mini" @click="logout">退出登录</el-button>
        </div>
        <el-button slot="reference" style="font-size: 20px;margin-right: 40px" type="text"><i class="el-icon-user-solid"></i>      {{this.userName}}</el-button>
      </el-popover>

    </div>
  </div>
  </div>
</template>

<style>
img{
  height: 70px;
  width: auto;
}
.head-one{
  display: flex;
  background: white;
  align-items: center;
  height: 70px;
  justify-content: space-between;
}
.title{
  display: flex;
  align-items: center;
  height: 70px;
}
.titleText{
  line-height: 70px;
  font-size: 22px;
  font-weight: 600;
}
.select{
  color: black;
  background: white;
  box-sizing: border-box;
  border: white;
  height: 70px;
  width: 150px;
  font-size: 18px;
}
.router-link-active {
  text-decoration: none;
  background: cornflowerblue;
  color: white;
  height: 70px;
  width: 150px;
}
</style>